import Echarts from "@/components/Echarts"
import { Button } from "antd"
import { useEffect, useState } from "react"

const InitEcharts = () => {
    const [option, setOption] = useState<any>({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })

    const handleClick = () => {
        setOption({
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
              }
            ]
          })
    }

    useEffect(() => {
        console.log(option)
    },[option])

    return (
        <div style={{width:'60vw',height:'60vh'}}>
            <Button onClick={handleClick}>点击改变option</Button>
            <Echarts option={option}/>
        </div>
    )
}

export default InitEcharts